<template>
	<view class="container">
		<!-- <view class="header_area flex">
			<scroll-view scroll-x="true" class="move_card_area" :scroll-left="scrollLeft * select_index" @scroll="scroll_move" scroll-with-animation="true">
				<view class="card_box flex">
					<view class="time_card"></view>
					<view class="time_card"></view>
					<view class="time_card flex" v-for="(item, index) in time_arr" :key="index" :class="{ time_card_select: index == select_index }" @click="tap_click(index)">
						<view class="time_card_time">{{ item }}</view>
						<view class="time_card_text">{{ show_type(item) }}</view>
					</view>
					<view class="time_card"></view>
					<view class="time_card"></view>
				</view>
			</scroll-view>
		</view> -->
		<!-- <view class="list_area flex">
			<view class="list_box flex" v-for="(item,index) in list_arr" :key="index" @click="go_detail_page(item)">
				<view class="goods_img_box">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="goods_info flex">
					<view class="goods_name">{{item.title}}</view>
					<view class="goods_end_time flex" v-if="item.status == 1">正在抢购<text>倒计时：{{item.reset_time}}</text></view>
					<view class="goods_start_time flex" v-else>即将开始<text>{{item.gmtStart | dateFormat}}开始</text></view>
					<view class="goods_price">￥{{item.spuSeckillPrice && item.spuSeckillPrice / 100}}<text>￥{{item.price && item.price / 100}}</text></view>
				</view>
				<view class="look_goods_btn" :class="{'look_goods_bg': item.status == 0}">{{item.status == 1? '立即抢':'去看看'}}</view>
			</view>
		</view> -->
		<view class="swiper_area flex">
			<swiper class="swiper" :current="select_index" :interval="interval" :duration="duration" @animationfinish="move_finish">
				<swiper-item v-for="(itemData, indexIndex) in list_arr" :key="itemData.label">
					<scroll-view class="main_area" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
						<!-- <view class="black_area"></view> -->
						<view class="list_area flex">
							<view class="list_box flex" v-for="(item, index) in itemData.act_arr" :key="index" @click="go_detail_page(indexIndex, index)">
								<view class="goods_img_box"><image :src="item.img" mode="aspectFill"></image></view>
								<view class="goods_info flex">
									<view class="goods_name">{{ item.title }}</view>
									<view class="goods_end_time flex" v-if="item.status == 1">
										正在抢购
										<text>倒计时：{{ item.reset_time }}</text>
									</view>
									<view class="goods_start_time flex" v-else>
										即将开始
										<text>{{ item.gmtStart | dateFormat }}开始</text>
									</view>
									<view class="goods_price">
										￥{{ item.spuSeckillPrice && item.spuSeckillPrice / 100 }}
										<text>￥{{ item.price && item.price / 100 }}</text>
										<view class="goods_sale">销量: {{item.seckillSpuSales || 0}}</view>
									</view>
								</view>
								<view class="look_goods_btn" :class="{ look_goods_bg: item.status == 0 }">{{ item.status == 1 ? '立即抢' : '未开始' }}</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			time_arr: [],
			list_arr: [],
			seckill_stop: true,
			statusBarHeight: 0,
			select_index: 0,
			autoplay: false,
			interval: 2000,
			duration: 500,
			scrollTop: 0,
			scrollLeft: 75,
			timer: null
		};
	},
	onHide() {
		this.seckill_stop = false;
	},
	destroyed() {
		this.seckill_stop = false;
	},
	onShow() {
		this.seckill_stop = true;
		this.get_seckill_list();
	},
	onLoad(options) {},
	onShareAppMessage() {
		return {
			title: '秒杀商品列表',
			// imageUrl: this.list_arr.imgList[0] + '?x-oss-process=style/600px',
			path: '/pages/goods/seckill_list'
		};
	},
	methods: {
		//获取秒杀列表
		get_seckill_list() {
			uni.showLoading({
				title: '加载中'
			});
			this.$api.request('seckill', 'getSeckillPageToday').then(res => {
				this.handle_list(res.data.items);
				this.seckill_stop = true;
				uni.hideLoading();
			});
		},
		handle_list(arr) {
			this.time_arr = [];
			this.list_arr = [];
			for (let i in arr[0]) {
				this.time_arr.push(i);
				this.list_arr.push({
					act_arr: arr[0][i]
				});
			}
			this.init_reset_time();
			this.init_tap();
		},
		init_reset_time() {
			this.list_arr.forEach((item, index) => {
				item.act_arr.forEach((it, idx) => {
					this.$set(it, 'reset_time', this.exchange_time(it.gmtEnd));
				});
			});
			if (this.seckill_stop) {
				setTimeout(() => {
					this.init_reset_time();
				}, 1000);
			}
		},
		exchange_time(end_time) {
			let now_stamp = new Date().getTime();
			let gap_time = end_time - now_stamp;
			if (now_stamp > end_time) {
				return '00:00:00';
			}
			let hours = parseInt(gap_time / (1000 * 60 * 60));
			let minutes = parseInt((gap_time % (1000 * 60 * 60)) / (1000 * 60));
			let seconds = parseInt((gap_time % (1000 * 60)) / 1000);
			let reset_time = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
			return reset_time;
		},
		// 进入详情页
		go_detail_page(idx, index) {
			uni.navigateTo({
				url: '/pages/goods/seckill_detail?seckillSpuId=' + this.list_arr[idx].act_arr[index].id
			});
		},
		tap_click(index) {
			this.select_index = index;
		},
		// 切换动画完成
		move_finish(e) {
			this.select_index = e.detail.current;
		},
		scroll_move(e) {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				// this.select_index = parseInt((e.detail.scrollLeft + 12) / 75);
				// console.log(this.select_index)
			}, 100);
		},
		show_type(time) {
			let now_date = new Date();
			let now_stamp = new Date().getTime();
			let today = now_date.getFullYear() + '/' + (now_date.getMonth() + 1) + '/' + now_date.getDate();
			let aim_stamp = new Date(today + ' ' + time).getTime();
			if (aim_stamp > now_stamp) {
				return '即将开始';
			} else {
				return '已开始';
			}
		},
		init_tap() {
			let now_date = new Date();
			let now_stamp = new Date().getTime();
			let today = now_date.getFullYear() + '/' + (now_date.getMonth() + 1) + '/' + now_date.getDate();
			let last_index = this.time_arr.length;
			let last_stamp = new Date(today + ' ' + this.time_arr[last_index - 1]).getTime();
			this.time_arr.forEach((item, index) => {
				let aim_stamp = new Date(today + ' ' + item).getTime();
				if (now_stamp > aim_stamp && now_stamp <= aim_stamp + 2 * 60 * 60 * 1000) {
					this.select_index = this.time_arr.indexOf(item);
				}
			});
			if (now_stamp > last_stamp) {
				this.select_index = last_index - 1;
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	display: flex;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	background: #ffffff;
	flex-direction: column;
	align-items: center;
}
.flex {
	display: flex;
}
.header_area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100upx;
	z-index: 10;
	overflow: hidden;
	background: #ffffff;
	.move_card_area {
		white-space: nowrap;
		.card_box {
			align-items: flex-start;
			.time_card {
				height: 100upx;
				flex-shrink: 0;
				width: 150upx;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.time_card_time {
					line-height: 42upx;
					font-size: 26upx;
					color: #818181;
					font-weight: bold;
				}
				.time_card_text {
					line-height: 30upx;
					font-size: 24upx;
					color: #818181;
				}
			}
			.time_card_select {
				background: #ef546f;
				.time_card_time {
					color: #ffffff;
					font-size: 34upx;
				}
				.time_card_text {
					color: #ffffff;
				}
			}
		}
	}
}
.black_area {
	width: 100%;
	height: 120upx;
}
.swiper_area {
	width: 100%;
	height: 100%;
	.swiper {
		height: 100%;
		width: 100%;
		.main_area {
			height: 100vh;
			width: 100%;
			.main_box {
				width: 100%;
				flex-direction: column;
				align-items: center;
				margin-bottom: 100upx;
			}
		}
	}
}
.list_area {
	width: 100%;
	flex-direction: column;
	align-items: center;
}
.list_box {
	position: relative;
	height: 188upx;
	width: 690upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 18upx 0px rgba(24, 24, 24, 0.08);
	border-radius: 10upx;
	margin-bottom: 20upx;
	align-items: center;
	.goods_img_box {
		width: 138upx;
		height: 127upx;
		border-radius: 10upx;
		overflow: hidden;
		margin: 0 20upx 0 24upx;
		image {
			width: 138upx;
			height: 127upx;
		}
	}
	.goods_info {
		height: 100%;
		flex-direction: column;
		justify-content: center;
		.goods_name {
			font-size: 30upx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			line-height: 53upx;
		}
		.goods_end_time {
			font-size: 18upx;
			color: rgba(228, 83, 109, 1);
			height: 40upx;
			align-items: center;
			text {
				height: 100%;
				display: flex;
				align-items: center;
				&::before {
					content: ' ';
					display: block;
					height: 32upx;
					width: 28upx;
					margin: 0 10upx 0 9upx;
					// background: url(/static/icon_zzqg.png) no-repeat;
					background-size: 100%;
				}
			}
		}
		.goods_start_time {
			font-size: 18upx;
			color: #62b773;
			height: 40upx;
			align-items: center;
			text {
				height: 100%;
				display: flex;
				align-items: center;
				&::before {
					content: ' ';
					display: block;
					height: 32upx;
					width: 28upx;
					margin: 0 10upx 0 9upx;
					// background: url(@/static/icon_jjks.png) no-repeat;
					background-size: 100%;
				}
			}
		}
		.goods_price {
			line-height: 60upx;
			font-size: 30upx;
			color: #e4536d;
			font-weight: bold;
			position: relative;
			text {
				font-size: 16upx;
				color: #aeaeae;
				text-decoration: line-through;
				margin-left: 15upx;
			}
			.goods_sale{
				position: absolute;
				top: 0;
				left: 180upx;
				line-height: 60upx;
				font-size: 24upx;
				color: rgba(174,174,174,1);
			}
		}
	}
	.look_goods_btn {
		position: absolute;
		bottom: 27upx;
		right: 11upx;
		width: 121upx;
		height: 50upx;
		background: rgba(249, 67, 106, 1);
		border-radius: 25upx;
		line-height: 50upx;
		text-align: center;
		font-size: 22upx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
	.look_goods_bg {
		background: rgba(98, 183, 115, 1);
	}
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
